<template>
  <div>
<el-dialog title="新增用户" :visible.sync="dialogAddUserShow">
 <el-form :model="addUserList" :rules="rules" ref="ruleForm">
    <el-form-item label="用户头像" label-width="120px">
     <el-avatar :src="addUserList.userPhotoUrl">
     <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
     </el-avatar>
     <el-upload
        class="upload-demo"
        action=""
        :multiple="false"
        :show-file-list="false"
        :http-request="upload"
        >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
     </el-upload>
    </el-form-item>
    <el-form-item label="用户名称" label-width="120px" prop="userName"> 
      <el-input v-model="addUserList.userName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="真实姓名" label-width="120px" prop="realName">
      <el-input v-model="addUserList.realName" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="手机号码" label-width="120px" prop="phone">
      <el-input v-model.number="addUserList.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" label-width="120px" prop = "email">
      <el-input v-model="addUserList.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="密码" label-width="120px" prop="password"> 
      <el-input v-model="addUserList.password" autocomplete="off" type="password"></el-input>
    </el-form-item>
     <el-form-item label="确认密码" label-width="120px" prop="password"> 
      <el-input v-model="addUserList.password" autocomplete="off" type="password"></el-input>
    </el-form-item>
    <el-form-item label="图片识别次数" label-width="120px" prop="photoDistinguishNum">
      <el-input v-model.number="addUserList.photoDistinguishNum" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="权限等级" label-width="120px">
      <!-- <el-input v-model="form.role[0].roleName" autocomplete="off"></el-input> -->
      <el-select v-model="RoleValue" placeholder="请选择">
            <el-option
            v-for="item in addUserRole"
            :key="item.value"
            :label="item.roleName"
            :value="item.id">
            </el-option>
      </el-select>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogAddUserShow = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
  </div>
    </el-dialog>
    
  </div>
</template>

<script>
import { AxiosGet,AxiosPost} from "../../axios";
export default {
  name: "AddUser",
  data() {
    return {
        dialogAddUserShow:false,
        addUserList:{
            userPhotoUrl:''
        },
        addUserRole:[],
        RoleValue:'',
        rules: {
          userName: [
            { required: true, message: '必须输入姓名', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          realName: [
            { required: true, message: '必须输入真实姓名', trigger: 'blur' },
            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: '请输入手机号码'},
             { type: 'number', message: '必须为数字值'}
          ],
          email: [
           { required: true, message: '请输入邮箱地址', trigger: 'blur' },
           { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }   
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'change' },
            { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
          ],
          photoDistinguishNum:[
            { required: true, message: '请输入次数'},
            { type: 'number', message: '必须为数字值'}
          ]
        },
        upUserPhotoUrl :''
    };
  },

  mounted() {
      
  },

  methods: {
      show(){
           this.dialogAddUserShow=true
           this.showAddUser()
      },
      showAddUser(){
        console.log("点击新增用户");
         AxiosGet('role/selectAll').then(sucess=>{
                sucess.data.forEach((element,index) => {
                    if(index != 0){
                        this.addUserRole.push(element)
                    }
                });
            })
      },
       submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
           let addUserUp = this.addUserList
            addUserUp.userPhotoUrl = this.upUserPhotoUrl
            this.addUserRole.forEach(item=>{
                if(this.RoleValue == item.id){
                    addUserUp.role = [item]
                }
            })
            AxiosPost('user/addUser',addUserUp).then(sucess=>{
                console.log(sucess);
                 this.$notify({title: 'sucess',message:sucess.data,type: 'success'});
                 this.addUserList={}
                 this.dialogAddUserShow=false
                 this.$emit("OK",sucess.data)
            }).catch(error=>{
                console.log(error);
                this.$notify({title: 'error',message: error.msg,type: 'error'});
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
       upload(param) {
            const formData = new FormData()
            formData.append('file', param.file)
            AxiosPost('photo/uploadAdd', formData).then(data => {
              console.log(data)
              this.addUserList.userPhotoUrl = data.data[0] +"?temp=" + Math.random()
              this.upUserPhotoUrl = data.data[1];
            }).catch(response => {
              console.log('图片上传失败'+response)
            })
          },
  },
};
</script>

<style scoped>
</style>